
<template>
  <main>
    主页
    <br>
    <LwCheckBox v-model:checked="flag" label="是否记住用户名?"></LwCheckBox>
    <p>flag:{{flag}}</p>
    <hr>
    <CounterButton ref="btn"  :a="1" b="2" >点击按钮</CounterButton>
  </main>
</template>


<script setup>
    /* 引入局部组件 */
    import LwCheckBox from '../components/LwCheckBox.vue';
    import CounterButton from '../components/CounterButton.vue';   
    import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'



    import { ref,onMounted } from 'vue';

    let flag = ref(false);
    let btn = ref();

    onMounted(()=>{
      // 对应ref名获取组件实例
      console.log(1111, btn.value);  // 获取组件实例
      console.log(1111, btn.value.count);  // 获取组件实例上暴露的数据
      btn.value.addCount();  // 调用组件实例上暴露的方法
      console.log(1111, btn.value.count);
    })



  onBeforeRouteUpdate((to,from,next)=>{
    console.log(3333333);
    next();
  })

  onBeforeRouteLeave((to,from,next)=>{
    console.log(4444444);
    next();
  })
    
    

</script>

